<template>
	<!-- 页面主体 -->
	<view>
		<view :class="{'quote-header': isQuoteMoreShow}" @tap.stop="onTapQuote">
			<graceFlex :classes="['row', 'wrap']">
				<view class="quote-item quote-item1 grace-flex1 color-red">
					<view>
						<text class="txt1">100.23</text>
					</view>
					<view>
						<text class="mg-right-10">1.20</text>
						<text>2.34%</text>
					</view>
					<!-- 日期 -->
					<view v-show="canDateIsChoice" class="can-date-view">
						<text>2019/12/21</text>
					</view>
				</view>
				<view class="quote-item quote-item2 grace-flex1 grace-flex-v1">
					<view class="sub-quote-item2">
						<text class="quote-item-label">高</text>
						<text class="color-red">9.67</text>
					</view>
					<view class="sub-quote-item2">
						<text class="quote-item-label">低</text>
						<text class="color-green">9.01</text>
					</view>
				</view>
				<view class="quote-item quote-item2 grace-flex1 grace-flex-v1">
					<view class="sub-quote-item2">
						<text class="quote-item-label">开</text>
						<text :class="textColorClass">9.67</text>
					</view>
					<view class="sub-quote-item2">
						<text class="quote-item-label">换</text>
						<text>9.01%</text>
					</view>
				</view>
				<view class="quote-item quote-item2 grace-flex1 grace-flex-v1">
					<view class="sub-quote-item2">
						<text class="quote-item-label">量比</text>
						<text>9.67</text>
					</view>
					<view class="sub-quote-item2">
						<text class="quote-item-label">金额</text>
						<text>9.01亿</text>
					</view>
				</view>
			</graceFlex>
		</view>
		<!-- 行情数据 -->
		<view v-if="isQuoteMoreShow" :animation="quoteMoreAnimation">
			<!-- 遮罩层 -->
			<view class="quote-mask" @tap.stop="quoteMoreToggle"></view>
			<view class="quote-more-wrapper">
				<view>
					<text>行情数据</text>
				</view>
				<view>
					<graceFlex class="quote-item-h-container" :classes="['row', 'wrap','space-between']">
						<view class="quote-item-h">
							<text class="quote-item-label">涨停</text>
							<text class="color-red">9.33</text>
						</view>
						<view class="quote-item-h">
							<text class="quote-item-label">均价</text>
							<text>9.33</text>
						</view>
						<view class="quote-item-h">
							<text class="quote-item-label">跌停</text>
							<text class="color-green">9.33</text>
						</view>
						<view class="quote-item-h">
							<text class="quote-item-label">振幅</text>
							<text>9.33%</text>
						</view>
					</graceFlex>
					<graceFlex class="quote-item-h-container" :classes="['row', 'wrap','space-between']">
						<view class="quote-item-h">
							<text class="quote-item-label">总手</text>
							<text>9.33</text>
						</view>
						<view class="quote-item-h">
							<text class="quote-item-label">内盘</text>
							<text class="color-green">99933</text>
						</view>
						<view class="quote-item-h">
							<text class="quote-item-label">委比</text>
							<text>-9.33%</text>
						</view>
						<view class="quote-item-h">
							<text class="quote-item-label">外盘</text>
							<text class="color-red">23233</text>
						</view>
						<view class="quote-item-h">
							<text class="quote-item-label">量比</text>
							<text>0.95</text>
						</view>
					</graceFlex>
					<graceFlex class="quote-item-h-container" :classes="['row', 'wrap','space-between']">
						<view class="quote-item-h">
							<text class="quote-item-label">流通股</text>
							<text>9.33亿</text>
						</view>
						<view class="quote-item-h">
							<text class="quote-item-label">市净率</text>
							<text>2.34</text>
						</view>
						<view class="quote-item-h">
							<text class="quote-item-label">流通值</text>
							<text>68.5亿</text>
						</view>
						<view class="quote-item-h">
							<text @tap="PETipToggle" class="quote-item-label">市盈(静) <text> ？</text></text>
							<text>33.33</text>
						</view>
						<view class="quote-item-h">
							<text class="quote-item-label">总股本</text>
							<text>6.6亿</text>
						</view>
						<view class="quote-item-h">
							<text class="quote-item-label">市盈(动)</text>
							<text>0.95</text>
						</view>
						<view class="quote-item-h">
							<text class="quote-item-label">总市值</text>
							<text>95.00</text>
						</view>
						<view class="quote-item-h">
							<text class="quote-item-label">市盈(TTM)</text>
							<text>295</text>
						</view>
					</graceFlex>
				</view>
				<!-- 市盈介绍弹窗 -->
				<graceShade :show="isPETipShow">
					<view class="PETip-container">
						<view class="PETip-content">
							<view class="grace-flex PETip-content-item">
								<view class="quote-item-label PETip-label">
									<text>市盈率(动)</text>
								</view>
								<view class="grace-flex1">
									<text>总市值除以预估全年净利润，例如当前公布一季度净利润1000万，则预估全年净利润4000万</text>
								</view>
							</view>
							<view class="grace-flex PETip-content-item ">
								<view class="quote-item-label PETip-label">
									<text>市盈率(静)</text>
								</view>
								<view class="grace-flex1">
									<text>总市值除以年度净利润</text>
								</view>
							</view>
							<view class="grace-flex PETip-content-item">
								<view class="quote-item-label PETip-label">
									<text>市盈率(TTM)</text>
								</view>
								<view class="grace-flex1">
									<text>总市值除以最近四个季度的利润</text>
								</view>
							</view>
						</view>
						<button class="PETip-btn" @tap.self="PETipToggle">我知道了</button>
					</view>
				</graceShade>
			</view>
		</view>
	</view>
</template>
<script>
	import gracePage from "../../graceUI/components/gracePage.vue"; // 此组件要引入，不然graceFlex组件效果没用
	import graceFlex from "../../graceUI/components/graceFlex.vue";
	import graceShade from "../../graceUI/components/graceShade.vue";
	export default {
		props:{
			/* 
			需要的数据：
			 头部行情数据
			 更多行情数据
			 是否是查看历史K线的
			 上一个交易日的收盘价
			 判断部分数值颜色的根据值
			 */
			quoteHeaderData:{
				type: Object,
				required: true,
				default: {}
			},
		},
		data() {
			return {
				canDateIsChoice: true,
				isTap: false,
				isQuoteMoreShow: false,
				quoteMoreAnimation: {},
				isPETipShow: false,
				quoteData: {
					open: 9.8,
					close: 9.99,
					lowest: 9.22,
					highest: 10.22,
					last: 9.5,
					latest: 9.66
				}
			}
		},
		onLoad: function() {},
		computed: {
			textColorClass() {
				const latestPrice = Number(this.quoteData.latest);
				const lastPrice = Number(this.quoteData.last);
				if (latestPrice > lastPrice) {
					return 'color-red'
				} else if (value < compareValue) {
					return 'color-green';
				} else {
					return ''
				}
			}
		},
		methods: {
			onTapQuote() {
				this.isTap = !this.isTap;
				this.quoteMoreToggle();
			},
			// 控制更多行情数据的显示和隐藏
			quoteMoreToggle() {
				// var animation = uni.createAnimation({
				// 	duration: 1000,
				// 	timingFunction: 'ease',
				// });
				// this.quoteMoreAnimation = animation;

				this.isQuoteMoreShow = !this.isQuoteMoreShow
				// 显示的时候请求更多的行情数据
				/* ...... */
				
			},
			// 控制PE介绍的显示和隐藏
			PETipToggle() {
				this.isPETipShow = !this.isPETipShow;
			}
		},
		components: {
			graceFlex,
			graceShade
		}
	}
</script>
<style>
	.quote-header {
		border-bottom: 1rpx solid #A5A7B2;
	}

	.quote-item {
		box-sizing: border-box;
		height: 140rpx;
	}

	.quote-item-label {
		color: #666;
		margin-right: 10rpx;
	}

	.mg-right-10 {
		margin-right: 10rpx;
	}

	.quote-item1 {
		padding: 5rpx 5rpx 0 30rpx;
	}

	.quote-item1 .txt1 {
		font-size: 50rpx;
		line-height: 74rpx;
	}

	/* 当前手指选的K线日期 */
	.can-date-view {
		font-size: 16rpx;
		color: #A5A7B2;
		line-height: 1;
	}

	.quote-item2 {
		font-size: 32rpx;
		line-height: 70rpx;
	}

	.quote-item2>.sub-quote-item2 {
		font-size: 32rpx;
		line-height: 70rpx;
	}

	/* 点击头部显示更多行情信息的样式 */
	.quote-more-wrapper {
		background: #fff;
		padding: 30rpx;
		right: 0px;
		position: absolute;
		z-index: 2;
	}

	.quote-mask {
		background: rgba(0, 0, 0, 0.3);
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 300rpx;
		z-index: 1;
	}

	.quote-item-h-container {
		padding: 16rpx 0;
	}

	.quote-item-h {
		display: flex;
		justify-content: space-between;
		width: 300rpx;
		font-size: 32rpx;
		line-height: 60rpx;
	}

	.PETip-container {
		width: 540rpx;
		background-color: #fff;
		border-radius: 20rpx;
		z-index: 3;
	}

	.PETip-label {
		width: 200rpx;
	}

	.PETip-content {
		padding: 30rpx;
		font-size: 28rpx;
		line-height: 52rpx;
	}

	.PETip-content-item {
		margin: 20rpx 0;
	}

	.PETip-btn {
		font-size: 32rpx;
		border-radius: 20rpx;
	}

	.PETip-btn:after {
		border: 0;
	}
</style>
